<template>
  <!-- 项目实施 - 5进度报告 - 周报tab4 -->
  <div class="progress-report-tab4">
    <el-row :gutter="20">
      <el-col :span="24" style="margin-top:16px;">
        <el-form :model="formData" label-position="right" label-width="90px">
          <el-row :gutter="12">
            <el-col :span="16" v-if="showSearch == false">
              <advancedFilter></advancedFilter>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="项目名称">
                <el-input v-model="formData.ipt" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="报告日期">
                <el-date-picker
                  v-model="formData.date"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width:100%"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="报告人">
                <el-select v-model="formData.sel" multiple clearable placeholder="请选择..." style="width: 100%;">
                  <el-option label="报告人A" value="1"></el-option>
                  <el-option label="报告人B" value="2"></el-option>
                  <el-option label="报告人C" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="showSearch ? 6 : 8" style="text-align: right;">
              <el-button type="primary">筛选</el-button>
              <el-button @click="resetForm">重置</el-button>
              <el-button type="text" @click="changeSearch"> {{showSearch===true ? '高级筛选' : '普通筛选'}} </el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="24" style="margin-top:16px;">
        <cust-act-table
          ref="custActTable"
          tableType="weeklyReport"
          :list="tableData"
          :colConfigs="customColumns"
          @getDetail="showModal('btnModal')"
          @changePage="changePage"
          @getSelectedRow="showModal('table')"
          :pageNum="page.pageNum"
          :pageSize="page.pageSize"
          :total="page.total"
          showIdx
          :showAct="true"
          rKey="index"
        ></cust-act-table>
      </el-col>
    </el-row>
    <!-- 点击列表弹窗 -->
    <el-dialog title="查看" class="table-modal" :visible.sync="tableModalState" @close="closeModal('table')" width="1000px" :close-on-click-modal="false" destroy-on-close>
      <modalBtns modalType="table"></modalBtns>
      <formName text="工作报告档案"></formName>
      <div class="form-content">
        <formPart :showListTitle="false" ref="info1" modalTitle="modalDetail" :formList="workModalDetail.info1"></formPart>
        <formPart listTitle="基本信息" ref="info2" modalTitle="modalDetail" :formList="workModalDetail.info2"></formPart>
        <formPart listTitle="任务进度" ref="info3" modalTitle="TAB-TABLE-NOACT" :formList="workModalDetail.info3"></formPart>
      </div>
    </el-dialog>
    <!-- 点击按钮弹窗 -->
    <el-dialog title="整改通知" class="btn-modal" :visible.sync="btnModal" @close="closeModal('btnModal')" width="1210px" style="margin-top:6vh;" :close-on-click-modal="false">
      <detailModal :tabList="detailModalInfo.tabList" :modalImgs="detailModalInfo.imgs" :formDetailTitle="detailModalInfo.formDetailTitle" :formDetail="detailModalInfo.formList" :formData="detailModalInfo.doc" :rTabData="detailModalInfo.rTabData" menuType="整改通知"></detailModal>
    </el-dialog>
  </div>
</template>

<script>
import custActTable from "../../components/custActTable.vue";
import detailModal from '../../components/detailModal';
import advancedFilter from '../../components/advancedFilter';
import modalBtns from '../../components/modalBtns';
import formName from '../../components/formName';
import formPart from '../../components/formPart';
import { tableData5, customColumns5, workModalDetail } from '../../js/staticData';
export default {
  name: "progressReportTab4",
  components: {custActTable, detailModal, advancedFilter, modalBtns, formName, formPart},
  data() {
    return {
      formData: {
        ipt: '',
        sel: [],
        date: ''
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      showSearch: true,
      tableData: tableData5[3],
      customColumns: customColumns5[3],
      workModalDetail: workModalDetail,
      page: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      workModalPage: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      btnModal: false,
      tableModalState: false,
      detailModalInfo:{
        formDetailTitle: '整改通知',
        formList: [
          {
            title: '',
            modalTitle: 'EDIT-FORM',
            list: [
              { l: '经办人', v: '朱冠', span: 6 },
              { l: '经办日期', v: '2024-07-29', span: 6, type: 'datePicker' },
              { l: '经办部门', v: 'XX部门', span: 6 },
              { l: '№', v: '', span: 6 },
              { l: '经办单位', v: 'XX集团有限公司', span: 24 }
            ]
          },
          {
            title: '通知信息',
            modalTitle: 'EDIT-FORM',
            list: [
              { l: '项目名称', v: '蓝旗机器人造林', type: 'inputIconR', span: 12, icon: { path:require('../../images/modal-icon1.png'), width: '14px', height: '16px'} },
              { l: '项目编号', v: 'GCXM20220007', span: 6 },
              { l: '项目部门', v: '项目管理部', span: 6 },
              { l: '整改原因', v: '', span: 12, type: 'input' },
              { l: '整改要求', v: '', span: 12, type: 'input' },
              { l: '整改责任人', v: '苑珙', type: 'inputIconR', icon: { path:require('../../images/modal-icon4.png'), width: '14px', height: '16px'}, span: 6 },
              { l: '整改期限', v: '', type: 'datePicker', span: 6 },
              { l: '相关附件', v: '', type: 'inputIconR', span: 12, icon: { path:require('../../images/modal-icon2.png'), width: '14px', height: '16px'} }
            ],
          }
        ],
        tabList: [
          {
            label: "智能校验",
            value: "1",
            img: require('../../images/icon-tab-rt-2.png'),
            active: require('../../images/icon-tab-rt-active-2.png')
          }, {
            label: "流程预测",
            value: "4",
            img: require('../../images/icon-tab-rt-4.png'),
            active: require('../../images/icon-tab-rt-active-4.png')
          }, {
            label: "相关数据",
            value: "5",
            img: require('../../images/icon-tab-rt-5.png'),
            active: require('../../images/icon-tab-rt-active-5.png')
          }
        ],
        imgs: {
          contentImgTitle: "整改通知",
          img1: require('../../images/zgtz-form-modal-bg2.png'), // 查看流程
          img2: require('../../images/zgtz-form-modal-bg2-2.png'), // 查看流程泳道框图
          img3: [{
            num1: '0',
            num2: '1分',
            dateTime: '2024-08-08 09:17:05',
            status: 'finished',
            list: [{
              name: '整改责任人',
              role: '协同',
              opinion: '已阅',
              handler: '凌焘',
              handleTime: '',
              handleTime: '2024-08-09 15:20:00',
              investTime: '8分'
            }]
          }], // 流程预测
        },
        doc: {
          name: `整改通知-{项目名称}-{经办日期}`,
          flow: `整改负责人(协同)`
        },
        rTabData: [
          {
            label: '智能校验',
            info: [ // state: 1.不通过 2.警示 3.通过
              {l: '整改原因字段为空', state: 1, v: '不通过'},
              {l: '整改要求字段为空', state: 1, v: '不通过'},
              {l: '整改期限字段为空', state: 1, v: '不通过'}
            ]
          }, {
            label: '流程预测',
            info: [{
              num1: '0',
              num2: '1分',
              dateTime: '2024-08-08 09:17:05',
              status: 'finished',
              list: [{
                name: '整改责任人',
                role: '协同',
                opinion: '已阅',
                handler: '凌焘',
                handleTime: '',
                handleTime: '2024-08-09 15:20:00',
                investTime: '8分'
              }]
            }]
          }, {
            label: '相关数据',
            info: [
              {
                text: `蓝旗机器人造林整改通知-2024-07-25`,
                img: require('../../images/icon-doc.png')
              }, {
                text: `蓝旗机器人造林整改通知-2024-07-25`,
                img: require('../../images/icon-doc.png')
              }, {
                text: `蓝旗机器人造林整改通知-2024-07-25`,
                img: require('../../images/icon-doc.png')
              }, {
                text: `蓝旗机器人造林整改通知-2024-07-25`,
                img: require('../../images/icon-doc.png')
              }
            ]
          }
        ]
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.tableData = tableData5[3];
      this.customColumns = customColumns5[3];
    })
  },
  methods: {
    /**
     * @author Wrl
     * 重置查询条件
     */
    resetForm() {
      this.formData = {};
    },
    /**
     * @author Wrl
     * 切换查询条件
     */
    changeSearch() {
      this.showSearch = !this.showSearch
    },
    /**
     * @author Wrl
     * 显示弹窗
     */
    showModal(type) {
      this.modalType = type;
      setTimeout(() => {
        if(this.modalType == 'btnModal') {
          this.tableModalState = false;
          this.btnModal = true;
        }  else if(type == 'table') {
          this.tableModalState = true;
        }
      }, 200)
    },
    /**
     * @author Wrl
     * 关闭弹窗
     */
    closeModal(type) {
      if(type == 'btnModal') {
        this.btnModal = false;
      } else if(type == 'table') {
        this.tableModalState = false;
      }
    },
		/**
		 * @author Wrl
		 * 获取分页信息
		 */
		changePage(page) {
			this.page.pageNum = page.pageNum; // 当前页
			this.page.pageSize = page.pageSize; // 每页条数
			this.page.total = page.total; // 总数
		},
  }
}
</script>

<style lang="scss" scoped>
  .progress-report-tab4 {
    ::v-deep {
      .el-range-input,
      .el-range-separator {
        font-size: 12px;
      }
      .el-range-editor--medium.el-input__inner {
        padding: 3px 0 3px 5px;
      }
      .table-modal .el-dialog__body {
        padding: 0 20px 20px;
      }
      .cust-modal .cust-modal-bgi {
        margin-top: 10px;
      }
      .btn-modal .el-dialog__body {
        padding: 10px;
        background: #eeeeee;
      }
    }
  }
</style>